<template>
  <div id="mockjs-example">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入参数名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="queryNews"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="queryNews"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addNews"
          >增加</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <el-row>
      <el-button @click="queryNews">查询</el-button>
      <el-button type="primary" @click="addNews">增加</el-button>
    </el-row> -->

    <!-- stripe 属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。 -->
    <!-- 竖直方向的边框的，如果需要，可以使用 border 属性，它接受一个Boolean，设置为true即可启用。 -->
    <!-- el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 -->
    <el-table
      :data="newslist"
      stripe
      border
      fit=""
      style="width: 100%"
      height="500"
    >
      <el-table-column prop="id" label="id" width="120"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="createdTime" label="时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请输入标题"
            :maxlength="11"
            show-word-limit
            clearable
            prefix-icon="el-icon-mobile"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="formData.content"
            placeholder="请输入内容"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="时间" prop="createdTime">
          <el-input
            v-model="formData.createdTime"
            placeholder="请输入时间"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      queryParams: {
        title: "",
      },
      newslist: [],
      title: "add news",
      open: false,
      formData: { title: "", content: undefined, createdTime: undefined },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
        createdTime: [
          {
            required: true,
            message: "请输入时间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // 挂载的时候获取新闻列表
  mounted() {
    this.$http.get("/mock/news").then((res) => {
      // url即在mock.js中定义的
      console.log(res.data); // 打印一下响应数据
      this.newslist = res.data;
    });
  },
  methods: {
    queryNews() {
      // this.$http.get("/mock/news").then((res) => {
        // this.newslist = res.data;
        // });
      request({
        url: "/mock/news",
        method: "get",
        params: this.queryParams,
      }).then((res) => {
        debugger;
        // url即在mock.js中定义的
        // console.log(res.data); // 打印一下响应数据
        this.newslist = res;
      });
    },
    addNews() {
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    submit() {
      this.$http.post("/mock/addNew", this.formData).then((res) => {
        // url即在mock.js中定义的
        console.log(res.data); // 打印一下响应数据
        this.newslist = res.data;
        this.open = false;
        this.formData={}
      });
    },
    handleClick(_row) {
      this.$http.delete("/mock/deleteNew/" + _row.id).then((res) => {
        // url即在mock.js中定义的
        console.log(res.data); // 打印一下响应数据
        this.newslist = res.data;
      });
    },
  },
};
</script>

<style>
</style>